<template>
	<div>
		<NavTabs :tabs="tabs" v-model="nowTab"></NavTabs>
		<div class="detail-content" v-if="nowTab == '1'">
			<DetailPage v-bind="detailConfig" :model="baseMod" style="width: 100%; margin: 0 auto">
				<template v-slot:operateLog>
					<TimeLine :orderId="nowRowData.id" :orderStatusArr="orderStatusArr" />
				</template>
				<template v-slot:serviceMap>
					<GeoMap @map-onload="mapOnLoad" style="width: 100%; height: 20rem" />
				</template>
			</DetailPage>
		</div>
		<div class="detail-content" v-if="nowTab == '2'">
			<DetailPage v-bind="detailServiceConfig" :model="baseMod.omReposOrderExtend || {}" style="width: 100%; margin: 0 auto"> </DetailPage>
		</div>
		<div class="detail-content" v-if="nowTab == '3'">
			<FollowOrder
				:tableConfig="detailCallBackConfig"
				:searchConfig="false"
				:paramsObj="{ isWithAuth: 0, orderBatchNo: nowRowData.batchNo }"
			></FollowOrder>
		</div>
		<div class="detail-content" v-if="nowTab == '4'">
			<DetailPage v-if="!loading" v-bind="detailEvaluateConfig" :model="baseMod.evaluate || {}" style="width: 100%; margin: 0 auto"> </DetailPage>
		</div>
	</div>
</template>

<script setup lang="ts">
import GeoMap from '@/views/aplid/GeoMap/index.vue'
import NavTabs from '@/views/homeCare/components/NavTabs/index.vue'
import DetailPage from '@/views/aplid/DetailPage/index.vue'
import TimeLine from './TimeLine/index.vue'
import FollowOrder from '../../orderFollowUp/automatic/FollowOrder/index.vue'
import { detailEvaluateConfig, detailConfig, detailServiceConfig, detailCallBackConfig, orderStatusArr } from '../config'
import apiMod from '@/apiMod/index'
const props = defineProps<{
	nowRowData: any
}>()

const tabs = [
	{ label: '工单信息', value: '1' },
	{ label: '服务信息', value: '2' },
	{ label: '回访信息', value: '3' },
	{ label: '服务评价内容', value: '4' },
]
const loading = ref(false)
const nowTab = ref('1')
const baseMod: any = ref({
	omReposOrderExtend: {},
  evaluate:{}
})

const mapOnLoad = (map, AMap) => {
	if (baseMod.value.lon && baseMod.value.lat) {
		const marker = new AMap.Marker({
			icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
			position: [baseMod.value.lon, baseMod.value.lat],
		})
		map.add(marker)
		map.setFitView()
	}
}

const getInitData = () => {
	const data = props.nowRowData
	if (data.omReposOrderExtend) {
		const { orderItems, beforeServicePic, middleServicePic, afterServicePic, beforeServiceAudio, middleServiceAudio, afterServiceAudio } =
			data.omReposOrderExtend || {}
		const _getValue = (val) => {
			const v = JSON.parse(val || '[]')
			if (v && v.length > 0) {
				return v
					.map((item) => {
						if (item.recorder && typeof item.recorder === 'string') {
							return item.recorder
						}
						return item.imager
					})
					.filter(Boolean)
					.toString()
			} else {
				return ''
			}
		}

		data.omReposOrderExtend.orderItems = JSON.parse(orderItems||'[]')
		data.omReposOrderExtend.beforeServicePicStr = _getValue(beforeServicePic)
		data.omReposOrderExtend.middleServicePicStr = _getValue(middleServicePic)
		data.omReposOrderExtend.afterServicePicStr = _getValue(afterServicePic)

		data.omReposOrderExtend.beforeServiceAudio = _getValue(beforeServiceAudio)
		data.omReposOrderExtend.middleServiceAudio = _getValue(middleServiceAudio)
		data.omReposOrderExtend.afterServiceAudio = _getValue(afterServiceAudio)
	  baseMod.value = data || props.nowRowData
		loading.value = true
    if(!data.omReposOrderExtend.orderId) return 
		apiMod.view_omOrderEvaluate_one({ orderId: data.omReposOrderExtend.orderId }).then((res) => {
			baseMod.value.evaluate = res.data
			loading.value = false
		})
	}
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.detail-content {
	margin-top: 20px;
}
</style>
